<template>
  <div class="container">
    <div class="middle_box">
      <div class="handMj">
        <div class='expression'> 学霸公式：n*ABC + m*DDD + 1*EE 、 tips见右上灯笼</div>
        <img :class="{isPig:(pig==1&&id<=9)||(pig==2&&id>10&&id<=19)||(pig==3&&id>20)}" :src="getImageUrl(id)" @click="delMj(index)" v-for="(id ,index) in handMj" :key="index" />
      </div>
      <div>
        <button  @click="gang" v-if="isGang"><span>杠</span></button>
        <button class="button_bg2" @click="isGang = false" v-if="isGang"><span>取消</span></button>
        <button @click="checkSuccess" v-if="isCheck"><span>胡</span></button>
        <button class="button_bg2" @click="getNewMj" v-if="[1,4,7,10,13].includes(handMj.length)"><span>摸牌</span></button>
        <button class='button_bg3' v-else><span >请打出一张</span></button>
      </div>
    </div>
      <div class="footMj">
        <img :src="getImageUrl(id)"  v-for="(id ,index) in footMj" :key="index" />
      </div>
      <div class="gui" :style="{display:isNone}"></div>
      <div class='button_bg4' >{{remainMj.length}}</div>
  </div>
  <div :class="[dialogShow?'meng_ceng':'none']">
    <ul class='dialog'>
      <li @click='closeDialog(1)'>筒</li>
      <li @click='closeDialog(2)'>条</li>
      <li @click='closeDialog(3)'>万</li>
    </ul>
  </div>
</template>

<script >
import {reactive,defineComponent,toRefs, onMounted} from "vue"
import mjArr from "../utils/mj"   //引入108无序麻将
import findNum from "../utils/index"    
import isHu from "../utils/check"    //https://gitee.com/w_xd/mahjong-utils/blob/master/src/main/resources/MahjongUtils.js
export default defineComponent({
  name:"App",
  setup() {
   const data = reactive({
     mjArr,
     selectMj:[],   //获取随机的13个
     remainMj:[], //除去13个剩余的无序麻将
     handMj:[],//手牌
     footMj:[],//碰或者杠的牌 
     isGang:false, //是否可以杠
     gangId:'', //杠的id
     isCheck:false, //是否胡牌
     pig:'', //定缺 花猪
     dialogShow:'false', //定缺弹框
     isNone:'none',//是否展示胡了图片

   })
   onMounted(()=> {
     data.selectMj = mjArr.slice(0, 13)
     data.remainMj = mjArr.slice(13)
     data.handMj = [...data.selectMj]
     data.handMj.sort((a,b )=>a-b)
       getNewMj()
      data.dialogShow = true  //去定缺
   })
   const handMjSort = ()=> {
     setTimeout(()=> {
      data.handMj.sort((a,b )=>a-b)
      let tempArr1=[]
      let tempArr2=[]
      //将花猪放到最后  pig=3是不用处理
      if(data.pig==1){
        tempArr1 = data.handMj.filter(item=>item<10)
        tempArr2 = data.handMj.filter(item=>item>10)
        data.handMj = tempArr2.concat(tempArr1)
      }
      if(data.pig==2){
        tempArr1 = data.handMj.filter(item=>item>10&&item<20)
        tempArr2 = data.handMj.filter(item=>item<10||item>20)
        data.handMj = tempArr2.concat(tempArr1)
      }
      if(JSON.parse(localStorage.getItem('model2')))getNewMj()
     },1000)
   }
   const getNewMj = ()=> {
      data.handMj.push(...data.remainMj.splice(0,1))
      checkMj()
      //手牌麻将重复数最多的麻将
      let max = findNum(data.handMj)
      //是否有杠
      if(max[0]==4){
        //有杠
        data.isGang = true
        data.gangId = max[1]
      }else{
        data.isGang = false
      }
   }
   const gang = ()=> {
     //由于是简单的教学 没有开发选择杠哪一个
    data.handMj = data.handMj.filter(item=>item!==data.gangId)
    data.footMj = data.footMj.concat((new Array(4)).fill(data.gangId)) 
    getNewMj()
   }
   //打出一张
   const delMj = (index)=> {
     if([1,4,7,10,13].includes(data.handMj.length)){
       window.alert('请先摸牌')
     }else{
     data.handMj.splice(index,1)
     //摸牌的时候不排序  打出去的时候在排
      handMjSort()
     }
   }
   //判断是否胡牌
   const checkMj = ()=> {
     if(checkPig()){
       let arr  = [...data.handMj].sort((a,b )=>a-b)
       data.isCheck = isHu(arr)
     }
   }
   //胡牌
   const checkSuccess = ()=> {
     data.isNone = 'inline-block'
     setTimeout(()=> {
      let res= window.confirm('恭喜你糊了,是否要再来一局')
      if(res){
        location.reload()
      }
     },1000)
   }
   //加载图片
   const getImageUrl = (id) => {
        return new URL(`../assets/${id}.png`, import.meta.url).href
    }
    //判断  定缺  花猪
   const checkPig = () => {
     for(let item of handMj){
       if(data.pig==1&&item<=9) return false
       if(data.pig==2&&10<item<=19) return false
       if(data.pig==3&&item>=21) return false
     }
     return true
   }
   const closeDialog = (pig) => {
     data.pig = pig
     data.dialogShow = false
   }
    return {
    ...toRefs(data),
    getNewMj,
    delMj,
    gang,
    checkSuccess,
    getImageUrl,
    closeDialog
    }
  }
})
</script>

<style  scoped>
.container{
  position: relative;
}
.middle_box{
  width: 100%;
  position: absolute;
  left: 50%;
  top: 42%;
  transform:translate(-50%,-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.middle_box >div>button{
  position: relative;
  display: inline-block;
  background: url('../assets/btn2.png') no-repeat center center;
  width: 200px;
  height: 200px;
  background-size: contain;
  border:none;
  cursor: pointer;
}
.middle_box >div>button>span{
  font-size: 50px;
  /* font-weight: bold; */
  color: rgb(128, 126, 0);
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform:translate(-50%);
  width:500px;
}
.handMj{
  position: relative;
}
.handMj img{
 cursor: pointer;
}
.handMj img:last-child{
  border-bottom:2px solid black;
  padding-bottom:10px;
}
.footMj{
  position: absolute;
  left: 6%;
  top: 10%;
  transform: rotate(90deg);
  transform-origin:left top;
}
.button_bg2{
  background: url('../assets/button.png') no-repeat center center !important;
  background-size: contain !important;
  
}
.button_bg3{
  background: url('../assets/qing.png') no-repeat center center !important;
  background-size: contain !important;
  
}
.button_bg4{
  width: 100px;
  height: 100px;
  background: url('../assets/blank.png') no-repeat center center ;
  background-size: contain ;
  font-size:40px;
  color: red;
  position: absolute;
  right: 0;
  top: 12%;
  text-align: center;
  line-height: 100px;
}
.meng_ceng{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.356);
    top: 0;
    left: 0;
    z-index: 999;
    display: inline-block;
}
.dialog{
  position: absolute;
  left: 50%;
  top: 22%;
  transform:translate(-50%);
  display: flex;
}
.dialog>li{
  background: url('../assets/blank.png') no-repeat center center;
  width: 200px;
  height: 200px;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  color: red;
  font-size: 70px;
}
.none{
  display: none;
}
.isPig{
  opacity: .4;
}
.expression{
  position: absolute;
  right: 50%;
  top: -150px;
  transform:translate(50%);
}
.gui{
  background: url('../assets/gui.webp') no-repeat center center;
  position: absolute;
  left:0%;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  z-index:1111;
}
</style>
